<template>
  <view class="styleLifeServices">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <image class="image1" src="../../static/image/lifestyle1.png" mode="" />
    <view class="tabCont">
      <view class="tabList">
        <image
          class="image2"
          @click="gotoWebview('https://map.baidu.com/search/%E5%AD%A6%E6%A0%A1/@12912322,3316903,13z?querytype=s&da_src=shareurl&wd=%E5%AD%A6%E6%A0%A1&c=163&src=0&pn=0&sug=0&l=13&b=(12881602,3301911;12943042,3331895)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1')"
          src="../../static/image/lifestyle2.png"
          mode=""
        />
        <image
          class="image2"
          @click="gotoWebview('https://map.baidu.com/search/%E5%8C%BB%E9%99%A2/@12912322,3316903,13z?querytype=s&da_src=shareurl&wd=%E5%8C%BB%E9%99%A2&c=163&src=0&pn=0&sug=0&l=13&b=(12881602,3301911;12943042,3331895)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1')"
          src="../../static/image/lifestyle3.png"
          mode=""
        />
        <image class="image2" @click="gotoWebview('https://m.58.com/nc/')" src="../../static/image/lifestyle4.png" mode="" />
      </view>
      <view class="tabList">
        <image class="image2" @click="gotoWebview('https://m.dianping.com/nanchang/ch10/d1?from=m_nav_1_meishi')" src="../../static/image/lifestyle5.png" mode="" />
        <image class="image2" @click="gotoWebview('https://m.fang.com/zf/nc/')" src="../../static/image/lifestyle6.png" mode="" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {},
  methods: {
    gotoJump(url) {
      uni.navigateTo({
        url: url,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.styleLifeServices {
  background: #fff;
  min-height: 100vh;
  padding: 24rpx 32rpx;
  .image1 {
    width: 100%;
    height: 343rpx;
    margin-bottom: 22rpx;
  }
  .tabCont {
    background: #fff;
    border-radius: 16rpx;
    width: 686rpx;
    height: 500rpx;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    .tabList {
      display: flex;
      flex-wrap: nowrap;
      width: 101%;
      .image2 {
        width: 226rpx;
        height: 250rpx;
        border-right: 1px solid #e6e5e5;
        border-bottom: 1px solid #e6e5e5;
      }
    }
  }
}
</style>
